<template>
  <div class="decorateLeft scrollbar">
    <div class="search">
      <el-input
        placeholder="搜索组件名称 模糊搜索"
        prefix-icon="el-icon-search"
        v-model="searchKey"
        maxlength="20"
      ></el-input>
    </div>
    <div class="controls">
      <el-button
        class="vlonCollapseContentButton"
        v-for="item in list"
        :key="item.id"
        @click="chooseThis(item)"
      >
        <i :class="item.icon"></i>
        {{ item.title }}
      </el-button>
    </div>
  </div>
</template>

<script>

import pageTopComponentData from "../../../static/js/decorateComponent/pageTopComponentData.js";
import carouselImageComponentData from "../../../static/js/decorateComponent/carouselImageComponentData.js";
import announcementComponentData from "../../../static/js/decorateComponent/announcementComponentData.js";
import imageListComponentData from "../../../static/js/decorateComponent/imageListComponentData.js";
import buttonGroupComponentData from "../../../static/js/decorateComponent/buttonGroupComponentData.js";
import listNavigationComponentData from "../../../static/js/decorateComponent/listNavigationComponentData.js";
import titleComponentData from "../../../static/js/decorateComponent/titleComponentData.js";
import auxiliaryBlankComponentData from "../../../static/js/decorateComponent/auxiliaryBlankComponentData.js";
import auxiliaryLineComponentData from "../../../static/js/decorateComponent/auxiliaryLineComponentData.js";
import richTextComponentData from "../../../static/js/decorateComponent/richTextComponentData.js";
import floatButtonComponentData from "../../../static/js/decorateComponent/floatButtonComponentData.js";
import backTopComponentData from "../../../static/js/decorateComponent/backTopComponentData.js";
import projectComponentData from "../../../static/js/decorateComponent/projectComponentData.js";
import memberComponentData from "../../../static/js/decorateComponent/memberComponentData.js";
import commissionTemplateHeadComponentData from "../../../static/js/decorateComponent/commissionTemplateHeadComponentData.js";
import commissionTemplateListComponentData from "../../../static/js/decorateComponent/commissionTemplateListComponentData.js";
import dataDetailsComponentData from "../../../static/js/decorateComponent/dataDetailsComponentData.js";
import myTeamHeadComponentData from "../../../static/js/decorateComponent/myTeamHeadComponentData.js";
import myTeamListComponentData from "../../../static/js/decorateComponent/myTeamListComponentData.js";
import codeManageHeadComponentData from "../../../static/js/decorateComponent/codeManageHeadComponentData.js";
import codeManageListComponentData from "../../../static/js/decorateComponent/codeManageListComponentData.js";
import billPageHeadComponentData from "../../../static/js/decorateComponent/billPageHeadComponentData.js";
import billPageListComponentData from "../../../static/js/decorateComponent/billPageListComponentData.js";
import invitationPageComponentData from "../../../static/js/decorateComponent/invitationPageComponentData.js";
import dataPageHeadComponentData from "../../../static/js/decorateComponent/dataPageHeadComponentData.js";
import dataPageListComponentData from "../../../static/js/decorateComponent/dataPageListComponentData.js";
import promoteBusinessListComponentData from "../../../static/js/decorateComponent/promoteBusinessListComponentData.js";
import promoteBusinessBottomComponentData from "../../../static/js/decorateComponent/promoteBusinessBottomComponentData.js";
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
  name: "decorateLeft",
  data() {
    return {
      searchKey: "",

      list: [
        {
          id: "1-1",
          title: "图片轮播", //左侧列表组件名称
          name: "pictureRotation", //与后端数据库对接字段
          ename: "carouselImageComponent", //中间区域组件的名称
          icon: "iconfont icon-jichu-tupianlunbo", //左侧列表组件图标
        },
        {
          id: "1-2",
          title: "公告",
          name: "announcement",
          ename: "announcementComponent",
          icon: "iconfont icon-gonggao1",
        },
        {
          id: "1-3",
          title: "图片组",
          name: "singleDiagramComponent",
          ename: "imageListComponent",
          icon: "iconfont icon-tupianzu3",
        },
        {
          id: "1-4",
          title: "按钮组",
          name: "buttonGroupComponent",
          ename: "buttonGroupComponent",
          icon: "iconfont icon-anniuzu",
        },
        {
          id: "1-5",
          title: "列表导航",
          name: "mainVlonListNav",
          ename: "listNavigationComponent",
          icon: "iconfont icon-zititubiao-",
        },
        {
          id: "1-7",
          title: "标题栏",
          name: "titleComponent",
          ename: "titleComponent",
          icon: "iconfont icon-wenbenanniuzu",
        },
        {
          id: "1-8",
          title: "辅助空白",
          name: "auxiliaryBlank",
          ename: "auxiliaryBlankComponent",
          icon: "iconfont icon-yuanjiaofangkuang",
        },
        {
          id: "1-9",
          title: "辅助线",
          name: "auxiliaryLine",
          ename: "auxiliaryLineComponent",
          icon: "iconfont icon-fuzhuxian5",
        },
        {
          id: "1-10",
          title: "富文本",
          name: "vlonRichText",
          ename: "richTextComponent",
          icon: "iconfont icon-fuwenben",
        },
        {
          id: "1-11",
          title: "悬浮按钮",
          name: "floatingButton",
          ename: "floatButtonComponent",
          icon: "iconfont icon-yewutubiao_zujian-shujuluruzujian",
        },
        {
          id: "1-12",
          title: "返回顶部",
          name: "backToTop",
          ename: "backTopComponent",
          icon: "iconfont icon-fanhuidingbu",
        },
        {
          id: "1-6",
          title: "项目组",
          name: "projectTeam",
          ename: "projectComponent",
          icon: "iconfont icon-icon-project",
        },
        {
          id: "1-13",
          title: "会员组",
          name: "membershipStyle",
          ename: "memberComponent",
          icon: "iconfont icon-huiyuanyuyue",
        },
      ],
      //自定义组件
      pageTopComponentData,
      carouselImageComponentData,
      announcementComponentData,
      imageListComponentData,
      buttonGroupComponentData,
      listNavigationComponentData,
      titleComponentData,
      auxiliaryBlankComponentData,
      auxiliaryLineComponentData,
      richTextComponentData,
      floatButtonComponentData,
      backTopComponentData,
      projectComponentData,
      memberComponentData,
      //个性化组件
      //佣金模板
      commissionTemplateHeadComponentData,
      commissionTemplateListComponentData,
      //账单页面
      billPageHeadComponentData,
      billPageListComponentData,
      //我的团队
      myTeamHeadComponentData,
      myTeamListComponentData,
      //邀请页页面
      invitationPageComponentData,
      //码管理
      codeManageHeadComponentData,
      codeManageListComponentData,
      //数据明细
      dataDetailsComponentData,
      //数据页面
      dataPageHeadComponentData,
      dataPageListComponentData,
      //展业页面
      promoteBusinessListComponentData,
      promoteBusinessBottomComponentData,

      //在当前页是否需要更新悬浮按钮组件
      needUpdateFloatButtonComponent: false,
      //组件将要插入的位置
      willInsertComponentIndex: 1,

      //提交给后端的，第一批商定字段
      componentName: [
        {
          name: "图片轮播", //组件名称
          icon: "iconfont icon-jichu-tupianlunbo", //组件图标
          key: "pictureRotation", //组件名称
        },
        {
          name: "公告",
          icon: "iconfont icon-gonggao1",
          key: "announcement",
        },
        {
          name: "图片组",
          icon: "iconfont icon-tupianzu3",
          key: "singleDiagramComponent",
        },
        {
          name: "按钮组",
          icon: "iconfont icon-anniuzu",
          key: "buttonGroupComponent",
        },
        {
          name: "列表导航",
          icon: "iconfont icon-zititubiao-",
          key: "mainVlonListNav",
        },
        {
          name: "标题栏",
          icon: "iconfont icon-wenbenanniuzu",
          key: "titleComponent",
        },
        {
          name: "辅助空白",
          icon: "iconfont icon-yuanjiaofangkuang",
          key: "auxiliaryBlank",
        },
        {
          name: "辅助线",
          icon: "iconfont icon-fuzhuxian5",
          key: "auxiliaryLine",
        },
        {
          name: "富文本",
          icon: "iconfont icon-fuwenben",
          key: "vlonRichText",
        },
        {
          name: "悬浮按钮",
          icon: "iconfont icon-yewutubiao_zujian-shujuluruzujian",
          key: "floatingButton",
        },
        {
          name: "返回顶部",
          icon: "iconfont icon-fanhuidingbu",
          key: "backToTop",
        },
        {
          name: "项目组",
          icon: "iconfont icon-huaban7",
          key: "projectTeam",
        },
        {
          name: "会员样式",
          icon: "iconfont icon-xianxinggeren",
          key: "membershipStyle",
        },
      ],
    };
  },
  props: ["pageContent"],
  components: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
      if(this.pageContent) { 
        let controls = JSON.parse(this.pageContent);
        this.updateData(controls, 0);
      } else {
        let controls = [];
        if (controls.length == 0) {
          controls.push(this.pageTopComponentData);

          //佣金模板 id 7
          if(localStorage.getItem("individualizationPageKey")=="佣金模板") {
            controls.push(this.commissionTemplateHeadComponentData);
            controls.push(this.commissionTemplateListComponentData);
          }
          //账单信息 id 8
          if(localStorage.getItem("individualizationPageKey")=="账单信息") {
            controls.push(this.billPageHeadComponentData);
            controls.push(this.billPageListComponentData);
          }
          //我的团队 9
          if(localStorage.getItem("individualizationPageKey")=="我的团队") {
            controls.push(this.myTeamHeadComponentData);
            controls.push(this.myTeamListComponentData);
          }
          //邀请页页面
          if(localStorage.getItem("individualizationPageKey")=="邀请页页面") {
            controls.push(this.invitationPageComponentData);
          }
          //码管理页面
          if(localStorage.getItem("individualizationPageKey")=="码管理页面") {
            controls.push(this.codeManageHeadComponentData);
            controls.push(this.codeManageListComponentData);
          }
          //数据明细
          if(localStorage.getItem("individualizationPageKey")=="数据明细") {
            controls.push(this.dataDetailsComponentData);
          }
          //数据页面
          if(localStorage.getItem("individualizationPageKey")=="数据页面") {
            controls.push(this.dataPageHeadComponentData);
            controls.push(this.dataPageListComponentData);
          }
          //展业页面
          if(localStorage.getItem("individualizationPageKey")=="展业页面") {
            controls.push(this.promoteBusinessListComponentData);
            controls.push(this.promoteBusinessBottomComponentData);
          }

          this.updateData(controls, 0);
        }
      }
    },

    //点击选中当前组件到主视图区域
    chooseThis(item) {
      //console.log("左侧点选了组件", item.ename, "item: 组件自身");

      let controls = this.decorate.controls;
      //按照需求，最多只能添加1个返回顶部按钮
      if(item.ename === "backTopComponent") {
        if(controls.some(com=>com.ename==="backTopComponent")) {
          this.$message.warning("返回顶部组件只能添加一个");
          return false;
        }
      }
      //按照需求，最多只能添加5个悬浮按钮
      if(item.ename === "floatButtonComponent") {
        let count = 0;
        controls.forEach(item=>{
          if(item.ename==="floatButtonComponent") {
            count++;
          }
        })
        if(count >= 5) {
          this.$message.warning("悬浮按钮组件最多只能添加5个");
          return false;
        }
      }

      /**
       * 将要插入的新组件在组件列表中的位置，
       * 顶部组件固定在第一个位置，索引位0，所以，这里默认是1
       * 若当前选中的是顶部组件，则插入到其后面的第一位置，实际在列表中是第二位置
       * 若当前选中的是列表中的其它组件，则插入到紧随其后的位置
       * 若当前选中的是悬浮按钮（包括悬浮按钮和返回顶部按钮）,则插入到列表末尾
      */
      this.willInsertComponentIndex = 1;

      //将所有已选中的组件，设为未选中状态
      controls.forEach((row, index) => {

        //若找到某一个已选中的组件
        if (row.active == "active") {
          if(row.fixedBottom) {
            //若是固定在底部的组件，则其下面不能再添加其他组件，但可以在其上面添加组件
            this.willInsertComponentIndex = index;
          } else {
            //记录其位置，即知新组件插入的位置
            this.willInsertComponentIndex = index + 1;
          }
        }

        row.active = "";
      });

      // //console.log("willInsertComponentIndex ", this.willInsertComponentIndex);

      //根据当前点击的不同按钮，将对应按钮数据更新到主视图区域和右侧配置区域
      let row = null;
      row = JSON.parse(JSON.stringify(this[item.ename+"Data"]));
      row.id = "id_" + new Date().getTime();
      row.active = "active";

      let newControls = [];

      for (let i = 0; i < this.willInsertComponentIndex; i++) {
        if (controls[i]) {
          newControls.push(controls[i]);
        }
      }
      newControls.push(row);
      for (let j = this.willInsertComponentIndex; j < controls.length; j++) {
        if (controls[j]) {
          newControls.push(controls[j]);
        }
      }

      this.updateData(newControls, this.willInsertComponentIndex);
    },

    //更新组件数据
    updateData(controls, index) {
      // console.log("左侧要通知更新组件, 索引号 ",index,controls);

      this.$store.dispatch("controls", controls);

      if(index < 2) {
        Bus.$emit("updateMain", { update: "updatePageTop" });
      } else {
        Bus.$emit("updateMain");
      }

      //console.log("要更新的组件ID", controls[index].id);
      //console.log("在Left通知Right更新", controls[index].id);
      Bus.$emit("updateRight", {index: index});

    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>

<style scoped lang="scss">
.decorateLeft {
  width: 300px;min-width:300px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  .search {
    width: 100%;
    height: 46px;
    border-bottom: 1px solid #e9edef;
    box-sizing: border-box;
    padding-left: 5px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .controls {
    box-sizing: border-box;
  }

  .vlonCollapseContentButton {
    padding: 0px;
    min-width: 80px;
    min-height: 80px;
    border-color: transparent;
    background-color: #f4f6f8;
    &:hover {
      background-color: #f0faff;
      border-color: #c6e2ff;
    }
    i{color: #409eff;}
  }
}
</style>
<style lang="scss">
.decorateLeft {
  .search {
    .el-input {
      .el-input__inner {
        border: none;
      }
    }
  }

  .vlonCollapseContentButton {
    span {
      display: flex;
      flex-direction: column;
      font-size: 14px;
      i {
        font-size: 24px;
        margin-bottom: 10px;
      }
    }
    &:hover {
      span {
        i {
          color: #409eff;
          opacity: 1;
        }
      }
    }
  }
  .el-button + .el-button {
    margin-left: 15px;
  }
}
@media screen and (max-width: 1280px) {
  .vlonCollapseContentButton {
    margin-left: 15px;
    margin-bottom: 15px;
  }
}
@media screen and (min-width: 1281px) {
  .vlonCollapseContentButton {
    margin-left: 15px;
    margin-bottom: 15px;
  }
}
</style>
